<template>
  <span ref="clipboardRef" class="x-clipboard" :data-clipboard-text="content">
    <slot />
  </span>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, nextTick } from 'vue'
  import { useMessage } from 'naive-ui'
  import Clipboard from 'clipboard'

  export default defineComponent({
    name: 'XClipboard',
    components: {},
    props: {
      content: {
        type: [String, Number],
        define: ''
      }
    },
    setup($props, {}) {
      const $message = useMessage()
      const clipboardRef: any = ref(null)
      const $state = reactive({
        ...toRefs($props)
      })
      nextTick(() => {
        const clipboard = new Clipboard(clipboardRef.value)
        clipboard.on('success', () => {
          $message.success('复制成功')
        })
        clipboard.on('error', () => {
          $message.error('复制失败，请手动复制')
        })
      })

      return {
        ...toRefs($state),
        clipboardRef
      }
    },
    mounted() {}
  })
</script>

<style></style>
